<!DOCTYPE html>
<html>
  <head>
    <title>AJAX GO</title>
    <meta charset="utf8">
    <style>
      body {
        margin: 0;
        padding: 20px 30px; 
      }
      button {
        cursor: pointer;
        margin: 6px;
      }
      .head-btn {
        position: absolute;
        right: 10px;
        top: 300px;
      }
      thead {
        background-color: aquamarine;
        font-size: 20px;
        font-family: "宋体";
        font-style: normal;
      }
      table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
        text-align: center;
        border-spacing: 0;
        /* padding: 1px; */
      }
      th {
        width: 200px;
        height: 40px;
      }
      .btns {
        position: relative;
      }
      td {
        height: 30px;
      }
      .del-btn {
        background: red;
        color: white;
        position: absolute;
        right: 0;
        top: 0;
      }
    </style>
  </head>
  <body>
    <button class="head-btn" onclick="insert()">新增</button>
    <button class="head-btn" onclick="loadData(true)">刷新</button>
    <table> <!-- 渲染页面 -->
      <thead>
        <tr>
          <th>id</th>
          <th>名字</th>
          <th>电话</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="tbody"></tbody>
    </table>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
      loadData(false)
      function loadData(noty) {
        axios.get('/user').then(function(res) {
          res = res.data
          let content = ''
          for(let i=0; i<res.data.length; i++) {
            // 拼接
            content += `<tr>
              <td>${res.data[i].id}</td>
              <td>${res.data[i].name}</td>
              <td>${res.data[i].phone}</td>
              <td>${res.data[i].gender}</td>
              <td class="btns">
                <button onclick="info(${res.data[i].id})">详情</button>
                <button onclick="edit(${res.data[i].id})">编辑</button>
                <button class="del-btn" onclick="del(${res.data[i].id})">删除</button>
              </td>
            </tr>`
          } // 站内跳转
          document.getElementById('tbody').innerHTML = content
          if(noty)
            alert('刷新成功')
        })
      }
      function insert() {
        location.href = './form.html'
      }
      function info(id) {
        // 用 js 做页面跳转
        // location.href = `./user.html?id=${id}`
        location.href = './user.html?id=' + id
      }
      function edit(id) {
        location.href = './form.html?id=' + id
      }
      function del(id) {
        let res = confirm('确定要删除吗')
        if(res == true) {
          axios.delete('/user?id=' + id).then(function(res) {
            res = res.data
            if(res.code == 0) {
              alert('已删除')
              loadData(false)
            } else
              alert('操作失败')
          })
        } else {
          alert('您放弃了操作，数据未删除')
        }
      }
    </script>
  </body>
</html>